<template>
<div class="goodSku-wrap">
    <div class="header">
        <van-button size="small" round plain type="info" @click="addspec">添加规格</van-button>
        <van-button size="small" round plain type="info" @click="RefreshSpec">生成规格表</van-button>
    </div>
    <template v-if="spec.length != 0">
        <van-cell-group class="shadow">
            <div class="spec-wrap" v-for="(item,index) in spec" :key="index">
                <van-field v-model="item.title" placeholder="请输入规格名称" @click-right-icon="addSpecTitle(item,index)" @click-left-icon="deleteSepcTitle(item,index)">
                    <van-button slot="right-icon" type="info" size="mini">添加</van-button>
                    <svg slot="left-icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                        <use xlink:href="#icon-svg-11"></use>
                    </svg>
                </van-field>
                <div class="spec-children" v-for="(children,e) in item.spec" :key="e">
                    <van-field v-model="children.title" :placeholder="'请输入值 '+e" right-icon="clear" @click-right-icon="deleteSepcChild(index,e)" />
                </div>
            </div>
        </van-cell-group>
    </template>
    <template v-if="specList.length != 0">
        <table class="sepc-table text-center">
            <tbody>
                <tr class="text14">
                    <td>属性</td>
                    <td>库存</td>
                    <td>价格</td>
                    <td>会员价格</td>
                    <td>折扣价格</td>
                </tr>
                <tr v-for="(item,index) in specList" :key="index">
                    <td>
                        <span>
                            {{ item.spec }}
                        </span>
                    </td>
                    <td>
                        <van-field v-model="item.count" placeholder="库存" />
                    </td>
                    <td>
                        <van-field v-model="item.price" placeholder="价格" />
                    </td>
                    <td>
                        <van-field v-model="item.member_price" placeholder="会员价" />
                    </td>
                    <td>
                        <van-field v-model="item.discount_price" placeholder="折扣价" />
                    </td>
                </tr>
            </tbody>
        </table>
    </template>
    <div class="submit fixed">
        <van-button @click="submit" block type="info">保存</van-button>
    </div>
</div>
</template>

<script>
import {
    Dialog,
    Toast
} from 'vant';
export default {
    name: 'GoodSku',
    props: {
        sku: Object
    },
    data() {
        return {
            spec: [],
            specList: [],
            type: 'add'
        }
    },
    //组件创建完毕
    created() {
        console.group('created 组件创建完毕状态===============》');
        if (this.$props.sku) {
            this.type = 'edit';
            this.spec = this.$props.sku.type;
            this.specList = this.$props.sku.spec_price;
        }
    },
    methods: {
        addspec() {
            let obj = {
                title: null,
                spec: []
            }
            this.spec.push(obj);
        },
        deleteSepcTitle(item, index) { // 删除规格行
            Dialog.confirm({
                title: '提示',
                message: `您确定要删除${ item.title == null ? "" : item.title}吗 ?`
            }).then(() => {
                Toast('删除成功,请重新生成规格表');
                this.spec.splice(index, 1)

            }).catch(() => {
                // on cancel
            });
        },
        addSpecTitle(item, index) {
            this.spec[index].spec.push({
                title: null
            })
        },
        deleteSepcChild(index, e) { //删除子级
            Dialog.confirm({
                title: '提示',
                message: `您确定要删除吗 ?`
            }).then(() => {
                this.spec[index].sepc.splice(index, 1)
                Toast('删除成功,请重新生成规格表');
            }).catch(() => {
                // on cancel
            });
        },
        Descartes(array) {
            if (array.length < 2) return array[0] || [];
            return [].reduce.call(array, function (col, set) {
                var res = [];
                col.forEach(function (c) {
                    set.forEach(function (s, index) {
                        var t = [].concat(Array.isArray(c) ? c : [c]);
                        t.push(s);
                        res.push(t);
                    })
                });
                return res;
            });
        },
        RefreshSpec() { //生成规格
            if (this.spec.length == 0) {
                    this.$toast('请先添加规格');
                } else {
                    let arr = [];
                    this.spec.forEach((item, key) => {
                        if (item.title == null) {
                            this.$toast('请全部填写规格名称,空位请删除');
                        } else {
                            arr.push(this.forChiildTitle(item.spec))
                        }
                    })
                    let goodArr = this.Descartes(arr);
                    let Arr = goodArr.map(item => {
                        return {
                            spec: item.toString(),
                            count: item.count || 10,
                            price: item.price || 10,
                            member_price: item.member_price || 9.50,
                            discount_price: item.discount_price || 9.50,
                        }
                    })
                    this.specList = Arr;
                }
        },
        forChiildTitle(e) { //循环取出规格值
            let arr = [];
            e.forEach(item => {
                let title = item.title
                arr.push(title)
            })
            return arr
        },
        submit() {
          let spec = [];
          this.spec.forEach(item=>{
            item.children = item.spec;
            delete(item["spec"])
            spec.push(item);
            
          })
          this.$store.state.addGoodSepcData = spec;
          this.$store.state.addGoodSpecPrice = this.specList;
          this.$emit('onsku') //触发父级方法
        }
    }
}
</script>

<style lang="less" scoped>
.goodSku-wrap {
    padding: .25rem 0 70px;

    .header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: .25rem .5rem;
    }

    .spec-wrap {
        margin-top: .5rem;
        border: 1px solid #666;
        transition: .5s;
    }

    .sepc-table {
        margin-top: 1rem;
        width: 100%;
        transition: .5s;
    }

    .sepc-table tbody tr:nth-child(odd) {
        background-color: rgba(170, 170, 170, .4)
    }

    .sepc-table tbody tr:nth-child(even) {
        background-color: #f5f5f5
    }

    .sepc-table tbody tr:nth-child(1) {
        background-color: skyblue;
    }

    .sepc-table tbody tr:nth-child(1) td {
        padding: .25rem 0
    }

    .sepc-table tbody tr td:nth-child(1) {
        width: 30%;
    }

    .sepc-table tbody:nth-child(1) {
        border: 1px solid #999
    }

    .submit {
        padding: .5rem;
        bottom: 0;
        left: 0;
        right: 0;
    }
}
</style>
